import React from 'react';
import {
  StyleSheet, Platform,
  View, Text, Image, ScrollView,
  TextInput, Linking, Button,
  FlatList,
  // SectionList, 分组标签
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
    color: Platform.OS === 'ios' ? 'red' : 'blue',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const READING_REPO = 'http://www.trip.com';

class Demo extends React.Component {
  state = {
    isHungry: false,
  }

  static navigationOptions = {
    title: '测试',
    tabBarIcon: ({ tintColor }) => (
      <Icon name="md-information-circle" size={25} color={tintColor} />
    ),
    headerRight: (
      <Icon.Button
        name="logo-github"
        backgroundColor="transparent"
        underlayColor="transparent"
        activeOpacity={0.8}
        onPress={() => Linking.openURL(READING_REPO)}
      />
    )
  };

  changeHungry = () => {
    this.setState({ isHungry: !this.state.isHungry });
  }

  render() {
    const { isHungry } = this.state;

    const listData = [
      { key: 'Devin' },
      { key: 'Dan' },
      { key: 'Dominic' },
      { key: 'Jackson' },
      { key: 'James' },
      { key: 'Joel' },
      { key: 'John' },
      { key: 'Jillian' },
    ];
    const listItem = ({ item }) => <Text style={styles.item}>{item.key}</Text>;

    return (
      <View style={styles.container}>
        <ScrollView>
          <Text style={styles.sectionHeader}>Text</Text>
          <Image
            source={{
              uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
            }}
            style={{ width: 200, height: 200 }}
          />
        </ScrollView>
        <TextInput
          style={{
            height: 40,
            borderColor: 'gray',
            borderWidth: 1
          }}
          placeholder="Type here to translate!"
          // onChangeText={text => setText(text)}
          defaultValue="You can type in me"
        />
        <Text>Are You Hungry? {isHungry ? 'Yes' : 'No'}</Text>
        <Button
          style={styles.btn}
          onPress={this.changeHungry}
          // disabled={!isHungry}
          title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
        />
        <FlatList
          data={listData}
          renderItem={listItem}
        />
      </View>
    );
  }
}

export default Demo;
